<style lang="less" scoped>
  @import "../assets/css/new.less";
  @import '~vux/src/styles/center.less';

</style>
<template>
  <div class="new-content">
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- slides -->
      <swiper-slide v-for="item in slideImg"><img :src="item.imgSrc" alt=""></swiper-slide>

      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>//
      <!--<div class="swiper-button-prev" slot="button-prev"></div>-->
      <!--<div class="swiper-button-next" slot="button-next"></div>-->
    </swiper>
    <div class="item-date" v-for="item in shopList">
      <div class="date">
        <hr>
        <span>{{item.date}}</span>
        <hr>
      </div>
      <div class="shop">
        <div class="item-shop" :class="{'item-last':item.detail.length%2!==0&&key===item.detail.length-1}" v-for="(detail, key) in item.detail">
          <div class="img-contain">
            <img src="../assets/images/avatar.jpg" :src="detail.imgSrc" alt="">
          </div>
          <div class="title" style="-webkit-box-orient: vertical;">{{detail.title}}</div>
          <div class="price">
            <span class="fz-16 color-E52C2C fw">￥{{detail.price}}</span>
            <span class="fz-12 color-999 original-price">￥{{detail.originalPrice}}</span>
          </div>
        </div>
        <div class="clear"></div>
      </div>
    </div>
  </div>
</template>
<script>
  import common from '../js/common'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    name: 'new',
    components: {
      swiper,
      swiperSlide
    },
    data () {
      return {
        isAndroid: true,
        slideImg: [
          {
            imgSrc: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
          },
          {
            imgSrc: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
          },
          {
            imgSrc: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg',
          },
        ],
        shopList: [
          {
            date: '6月27日',
            detail: [
              {
                imgSrc: require('../assets/images/avatar.jpg'),
                title: '韩国2017下级新品白色两件套雪纺衫宽松高领喇叭七件套',
                price: 109,
                originalPrice: 209
              }
            ]
          },
          {
            date: '6月28日',
            detail: [
              {
                imgSrc: require('../assets/images/avatar.jpg'),
                title: '韩国2017下级新品白色两件套雪纺衫宽松高领喇叭七件套',
                price: 109,
                originalPrice: 209
              },
              {
                imgSrc: require('../assets/images/avatar.jpg'),
                title: '韩国2017下级新品白色两件套雪纺衫宽松高领喇叭七件套',
                price: 109,
                originalPrice: 209
              },
              {
                imgSrc: require('../assets/images/avatar.jpg'),
                title: '韩国2017下级新品白色两件套雪纺衫宽松高领喇叭七件套',
                price: 109,
                originalPrice: 209
              }
            ]
          }
        ],
        swiperOption: {//以下配置不懂的，可以去swiper官网看api，链接http://www.swiper.com.cn/api/
          // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，<br>　　　　　　　　假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
          notNextTick: true,
          // swiper configs 所有的配置同swiper官方api配置
          autoplay: 3000,
          direction : 'horizontal',
          grabCursor : true,
          setWrapperSize :true,
          //height : 300,
          //autoHeight: true,
          pagination : null,
          paginationClickable :true,
          Scrollbar: null,
          scrollbarHide: true,//滚动条
          mousewheelControl : true,
          observeParents:true,
          // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
          debugger: true,
        }
      }
    },
    computed: {
      styles () {
        let height = this.height;
        let clientHeight = document.documentElement.clientHeight;
        height = (clientHeight - 100) + 'px';
        return {
          height: height
        }
      }
    },
    /**
     * 过滤器
     * 如：
     *  formatDate: function (v) {
     *      return v.replace(/T|Z/g, ' ')
     *   }
     *
     *   使用方法在页面 {{ 属性 | 过滤器名称 }}
     * */
    filters: {
      /**
       *  格式化数字，即使为0，都保留 2位小数
       * */
      formatTime(time) {
        return util.formatDate(time, 'hh:mm:ss');
      }
    },
    mounted() {


      common.methods.setTitle('新品'); // 修改顶部导航标题
      var u = navigator.userAgent;
      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
      isAndroid ? this.isAndroid = true : this.isAndroid = false;
    },
    methods: {

    },
    watch: {

    }
  }
</script>
